<template>
  <div class="suggestion-table">
    <!-- 状态筛选区域 -->
    <div class="status-section">
      <t-tabs v-model="activeStatus" @change="onStatusChange" class="status-tabs">
        <t-tab-panel value="0" label="待处理">
          <template #label>
            <div class="tab-label">待处理</div>
          </template>
        </t-tab-panel>
        <t-tab-panel value="1" label="处理中">
          <template #label>
            <div class="tab-label">处理中</div>
          </template>
        </t-tab-panel>
        <t-tab-panel value="2" label="已完成">
          <template #label>
            <div class="tab-label">已完成</div>
          </template>
        </t-tab-panel>
      </t-tabs>
    </div>

    <!-- 筛选表单区域 -->
    <div class="search-section">
      <t-form :data="formData" :label-width="80" colon @reset="onReset" @submit="onSubmit">
        <t-row :gutter="[24, 24]">
          <t-col :span="6">
            <t-form-item label="标题" name="title">
              <t-input
                v-model="formData.title"
                class="form-item-content"
                type="search"
                placeholder="请输入建议标题进行搜索"
                :style="{ minWidth: '80px' }"
                clearable
              >
                <template #suffix-icon>
                  <t-icon name="search" />
                </template>
              </t-input>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="分类" name="categoryId">
              <t-select v-model="formData.categoryId" class="form-item-content" placeholder="请选择建议分类" clearable>
                <t-option value="1" label="功能建议" />
                <t-option value="2" label="问题反馈" />
                <t-option value="3" label="其它建议" />
              </t-select>
            </t-form-item>
          </t-col>
          <t-col :span="8">
            <t-form-item label="发布时间" name="timeRange">
              <t-date-range-picker
                v-model="formData.timeRange"
                class="form-item-content"
                placeholder="请选择发布时间范围"
                clearable
                :style="{ minWidth: '200px' }"
                mode="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </t-form-item>
          </t-col>
          <t-col :span="4" class="operation-container">
            <t-space>
              <t-button theme="primary" type="submit" shape="round">
                <template #icon>
                  <t-icon name="search" />
                </template>
                查询
              </t-button>
              <t-button type="reset" variant="base" theme="default" shape="round">
                <template #icon>
                  <t-icon name="refresh" />
                </template>
                重置
              </t-button>
            </t-space>
          </t-col>
        </t-row>
      </t-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-section">
      <!-- 统计信息 -->
      <div class="stats-info">
        <t-tag theme="primary" variant="light"> 共 {{ pagination.total }} 条记录 </t-tag>
      </div>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-container">
      <t-table
        :data="data"
        :columns="COLUMNS"
        :row-key="rowKey"
        :vertical-align="verticalAlign"
        :hover="hover"
        :pagination="pagination"
        :loading="dataLoading"
        :bordered="false"
        :stripe="true"
        row-hover-divider
        @page-change="rehandlePageChange"
        @change="rehandleChange"
      >
        <!-- 序号列 -->
        <template #index="{ rowIndex }">
          <div class="index-cell">
            {{ (pagination.current - 1) * pagination.pageSize + rowIndex + 1 }}
          </div>
        </template>

        <!-- 标题列 -->
        <template #title="{ row }">
          <div class="title-cell">
            <t-tooltip :content="row.title" placement="top">
              <div class="title-content">
                <t-icon name="file-text" class="title-icon" />
                <span class="title-text ellipsis">{{ row.title }}</span>
              </div>
            </t-tooltip>
          </div>
        </template>

        <!-- 分类列 -->
        <template #categoryName="{ row }">
          <div class="category-cell">
            <t-tag :theme="getCategoryTheme(row.categoryId)" variant="light">
              {{ getCategoryName(row.categoryId) }}
            </t-tag>
          </div>
        </template>

        <!-- 概述内容列，显示"查看详情"按钮 -->
        <template #simpleDesc="{ row }">
          <div class="content-cell">
            <t-button size="small" theme="primary" variant="outline" shape="round" @click="viewDetail(row)">
              <template #icon>
                <t-icon name="browse" />
              </template>
              查看详情
            </t-button>
          </div>
        </template>

        <!-- 发布者列 -->
        <template #publisher="{ row }">
          <div class="publisher-cell">
            <t-avatar size="large" class="publisher-avatar">
              {{ row.publisher }}
            </t-avatar>
          </div>
        </template>

        <!-- 发布时间列 -->
        <template #createTime="{ row }">
          <div class="time-cell">
            <t-icon name="time" class="time-icon" />
            <span class="time-text">{{ formatDateTime(row.createTime) }}</span>
          </div>
        </template>

        <!-- 操作列 -->
        <template #op="slotProps">
          <div class="operation-cell">
            <t-space>
              <!-- 根据状态显示不同的操作按钮 -->
              <t-button
                v-if="slotProps.row.status === 0"
                size="small"
                theme="primary"
                variant="text"
                @click="handleToProcessing(slotProps.row)"
              >
                <template #icon>
                  <t-icon name="edit" />
                </template>
                处理
              </t-button>
              <t-button
                v-else-if="slotProps.row.status === 1"
                size="small"
                theme="success"
                variant="text"
                @click="handleComplete(slotProps.row)"
              >
                <template #icon>
                  <t-icon name="edit" />
                </template>
                完成
              </t-button>
              <t-button
                v-else-if="slotProps.row.status === 2"
                size="small"
                theme="primary"
                variant="text"
                @click="handleView(slotProps.row)"
                style="color: #ffa500"
              >
                <template #icon>
                  <t-icon name="edit" style="color: #ffa500" />
                </template>
                修改回复
              </t-button>
              <!-- 删除按钮 -->
              <t-button size="small" theme="danger" variant="text" @click="handleClickDelete(slotProps)">
                <template #icon>
                  <t-icon name="delete" />
                </template>
                删除
              </t-button>
            </t-space>
          </div>
        </template>
      </t-table>

      <!-- 查看内容弹窗 -->
      <t-dialog
        v-model:visible="contentVisible"
        header="概述详情"
        :footer="false"
        width="800px"
        placement="center"
        :z-index="1000"
      >
        <div class="detail-content">
          <div class="detail-section">
            <h4 class="section-title">
              <t-icon name="file-text" class="section-icon" />
              简要概述
            </h4>
            <div class="section-content">{{ currentSuggestion?.simpleDesc || '暂无内容' }}</div>
          </div>
          <div class="detail-section">
            <h4 class="section-title">
              <t-icon name="description" class="section-icon" />
              详细概述
            </h4>
            <div class="section-content">{{ currentSuggestion?.detailDesc || '暂无内容' }}</div>
          </div>
          <div v-if="currentSuggestion?.imgUrls && currentSuggestion.imgUrls.length > 0" class="detail-section">
            <h4 class="section-title">
              <t-icon name="image" class="section-icon" />
              相关图片 ({{ currentSuggestion.imgUrls.length }}张)
            </h4>
            <div class="image-list">
              <img
                v-for="(img, index) in currentSuggestion.imgUrls"
                :key="index"
                :src="img"
                class="detail-image"
                @click="previewImage(img)"
                :alt="`图片${index + 1}`"
                @error="handleImageError"
              />
            </div>
          </div>
          <div v-if="currentSuggestion?.replyContent" class="detail-section">
            <h4 class="section-title">
              <t-icon name="file-text" class="section-icon" />
              回复内容
            </h4>
            <div class="section-content">{{ currentSuggestion?.replyContent || '暂无内容' }}</div>
          </div>
        </div>
      </t-dialog>

      <!-- 图片预览弹窗 -->
      <t-dialog
        v-model:visible="imagePreviewVisible"
        :footer="false"
        width="auto"
        placement="center"
        :z-index="9999"
        :close-on-overlay-click="true"
        :close-on-esc-keydown="true"
        :prevent-scroll-through="true"
        :show-overlay="true"
        :destroy-on-close="true"
        @close="closeImagePreview"
      >
        <div class="image-preview-container">
          <div class="preview-header">
            <t-button theme="default" variant="text" size="small" @click="closeImagePreview" class="close-btn">
              <template #icon>
                <t-icon name="close" />
              </template>
            </t-button>
          </div>
          <img :src="currentImageUrl" class="preview-image" alt="预览图片" />
        </div>
      </t-dialog>

      <!-- 回复弹窗 -->
      <t-dialog
        v-model:visible="replyVisible"
        :header="replyMode === 'reply' ? '完成建议' : replyMode === 'modify' ? '修改回复' : '处理建议'"
        :close-on-overlay-click="false"
        width="800px"
        placement="center"
        :z-index="1000"
      >
        <div class="reply-dialog-content">
          <!-- 详情数据展示区域 -->
          <div class="detail-section">
            <h4 class="section-title">
              <t-icon name="file-text" class="section-icon" />
              建议详情
            </h4>
            <div class="detail-content">
              <div class="detail-item">
                <span class="detail-label">标题：</span>
                <span class="detail-value">{{ currentSuggestion?.title }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">分类：</span>
                <span class="detail-value">
                  <t-tag :theme="getCategoryTheme(currentSuggestion?.categoryId || 0)" variant="light">
                    {{ getCategoryName(currentSuggestion?.categoryId || 0) }}
                  </t-tag>
                </span>
              </div>
              <div class="detail-item">
                <span class="detail-label">发布者：</span>
                <span class="detail-value">{{ currentSuggestion?.user.username }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">发布时间：</span>
                <span class="detail-value">{{ formatDateTime(currentSuggestion?.createTime || '') }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">简要概述：</span>
                <span class="detail-value overview-content">{{ currentSuggestion?.simpleDesc || '暂无内容' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">详细概述：</span>
                <span class="detail-value overview-content">{{ currentSuggestion?.detailDesc || '暂无内容' }}</span>
              </div>
              <div v-if="currentSuggestion?.imgUrls && currentSuggestion.imgUrls.length > 0" class="detail-item">
                <span class="detail-label">相关图片：</span>
                <div class="detail-images">
                  <img
                    v-for="(img, index) in currentSuggestion.imgUrls"
                    :key="index"
                    :src="img"
                    class="detail-image"
                    @click="previewImage(img)"
                    :alt="`图片${index + 1}`"
                    @error="handleImageError"
                  />
                </div>
              </div>
            </div>
          </div>

          <!-- 回复内容输入区域 -->
          <div v-if="replyMode === 'reply' || replyMode === 'modify'" class="reply-section">
            <h4 class="section-title">
              <t-icon name="chat" class="section-icon" />
              {{ replyMode === 'reply' ? '回复内容（可选）' : '回复内容（可选）' }}
            </h4>
            <t-form :data="replyForm" :label-width="80" colon>
              <t-form-item label="回复内容" name="replyContent">
                <t-textarea
                  v-model="replyForm.replyContent"
                  :placeholder="replyMode === 'reply' ? '请输入回复内容（可选）' : '请输入回复内容（可选）'"
                  :autosize="{ minRows: 4, maxRows: 6 }"
                  show-limit-number
                />
              </t-form-item>
            </t-form>
          </div>
        </div>
        <template #footer>
          <t-space>
            <t-button theme="default" @click="replyVisible = false">取消</t-button>
            <t-button v-if="replyMode === 'reply' || replyMode === 'modify'" theme="primary" @click="submitReply">
              {{ replyMode === 'reply' ? '确认' : '保存修改' }}
            </t-button>
            <t-button v-if="replyMode === 'processing'" theme="primary" @click="submitReply"> 确认处理 </t-button>
          </t-space>
        </template>
      </t-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { SuggestionRequest, SuggestionResponse, SuggestionStatusRequest } from '@/api/model/suggestionMode';
import {
  completeSuggestion,
  deleteSuggestion,
  getSuggestionDetail,
  getSuggestionList,
  handleSuggestion,
} from '@/api/suggestion';
import { prefix } from '@/config/global';
import { DEFAULT_PAGINATION } from '@/constants'; // 导入全局分页配置
import { useSettingStore } from '@/store';
import { formatDateTime } from '@/utils/date';
import type { PageInfo, PrimaryTableCol, TabValue } from 'tdesign-vue-next';
import { DialogPlugin, MessagePlugin } from 'tdesign-vue-next';
import { computed, nextTick, onActivated, ref } from 'vue';
defineOptions({ name: 'suggestionIndex' });
// 表单数据接口
interface FormData {
  title: string;
  categoryId?: number;
  timeRange?: [string, string]; // 日期范围，字符串格式
}

// 回复表单接口
interface ReplyForm {
  replyContent: string;
}

// 表格列配置
const COLUMNS: PrimaryTableCol[] = [
  {
    title: '序号',
    colKey: 'index',
    width: 80,
    align: 'center',
  },
  {
    title: '标题',
    colKey: 'title',
    width: 200,
    ellipsis: true,
    align: 'center',
  },
  {
    title: '类别',
    colKey: 'categoryName',
    width: 120,
    align: 'center',
  },
  {
    title: '概述内容',
    colKey: 'simpleDesc',
    width: 120,
    align: 'center',
  },
  {
    title: '发布者',
    colKey: 'publisher',
    width: 120,
    align: 'center',
  },
  {
    title: '发布时间',
    colKey: 'createTime',
    width: 160,
    align: 'center',
  },
  {
    align: 'left',
    fixed: 'right',
    width: 200,
    colKey: 'op',
    title: '操作',
  },
];

// 初始化表单数据
const searchForm: FormData = {
  title: '',
  categoryId: undefined,
  timeRange: ['', ''], // 日期范围，字符串格式
};

const formData = ref<FormData>({ ...searchForm });
const rowKey = 'id';
const verticalAlign = 'top' as const;
const hover = true;
// 分页配置 - 使用全局配置
const pagination = ref({ ...DEFAULT_PAGINATION });

// 数据相关
const data = ref<SuggestionResponse[]>([]);
const dataLoading = ref(false);

// 状态相关
const activeStatus = ref(0); // 当前选中的状态

// 弹窗相关
const contentVisible = ref(false);
const currentSuggestion = ref<SuggestionResponse | null>(null);

// 图片预览相关
const imagePreviewVisible = ref(false);
const currentImageUrl = ref<string>('');

// 回复相关
const replyVisible = ref(false);
const replyMode = ref<'reply' | 'modify' | 'processing'>('reply'); // 添加processing模式
const currentReplyId = ref<number>(0);
const replyForm = ref<ReplyForm>({
  replyContent: '',
});

// Store
const store = useSettingStore();

// 表头固定配置
// 当使用标签页路由时,偏移量为48px,否则为0
// 固定容器为布局组件
const headerAffixedTop = computed(
  () =>
    ({
      offsetTop: store.isUseTabsRouter ? 48 : 0,
      container: `.${prefix}-layout`,
    }) as any,
);

// 定义分类映射对象
const CATEGORY_MAP = {
  1: { name: '功能建议', theme: 'primary' },
  2: { name: '问题反馈', theme: 'warning' },
  3: { name: '其它建议', theme: 'success' },
} as const;

// 获取分类信息（包括名称和主题）
const getCategoryInfo = (categoryId: number) => {
  return CATEGORY_MAP[categoryId as keyof typeof CATEGORY_MAP] || { name: '未知分类', theme: 'default' };
};

// 如果需要单独获取分类名称
const getCategoryName = (categoryId: number) => {
  return getCategoryInfo(categoryId).name;
};

// 如果需要单独获取分类主题
const getCategoryTheme = (categoryId: number) => {
  return getCategoryInfo(categoryId).theme;
};

/**
 * 状态变化处理
 * @param value 新的状态值
 */
const onStatusChange = (value: TabValue) => {
  activeStatus.value = value as number;
  pagination.value.current = 1;
  fetchData();
};

// 列表页
onActivated(() => {
  console.log('onActivated');
  onReset();
});

/**
 * 获取建议列表数据
 */
const fetchData = async () => {
  dataLoading.value = true;
  try {
    console.log('fetchData', formData.value);

    // 构建请求参数
    const params: SuggestionRequest = {
      title: formData.value.title || undefined,
      categoryId: formData.value.categoryId,
      status: activeStatus.value,
      //使用dayjs格式化日期为后端期望的格式
      beginTime: formData.value.timeRange?.[0] ? formatDateTime(formData.value.timeRange[0]) : undefined,
      endTime: formData.value.timeRange?.[1] ? formatDateTime(formData.value.timeRange[1]) : undefined,
      pageNum: pagination.value.current,
      pageSize: pagination.value.pageSize,
    };

    // 发送请求
    const res = await getSuggestionList(params);
    console.log('res', res);

    // 通过类型推断安全获取 records 和 total
    const records = res.data.data?.records ?? [];
    const total = res.data.data?.total ?? 0;

    // 设置数据
    data.value = records.map((item) => ({
      ...item,
      publisher: item.user.username,
    }));
    pagination.value.total = total;
  } catch (e) {
    console.error('获取建议列表失败:', e);
    MessagePlugin.error(e.message || '获取建议列表失败');
  } finally {
    dataLoading.value = false;
  }
};

/**
 * 删除建议
 * @param slot 插槽参数
 */
const handleClickDelete = (slot: { row: { id: number } }) => {
  const dialogInstance = DialogPlugin.confirm({
    header: '提示',
    body: '确定要删除该建议吗？',
    onConfirm: async () => {
      try {
        await deleteSuggestion(slot.row.id);
        MessagePlugin.success('删除成功！');
        fetchData();
      } catch (e) {
        MessagePlugin.error(e.message || '删除失败');
      }
      dialogInstance.destroy();
    },
  });
};

/**
 * 完成建议
 * @param row 建议数据
 */
const handleComplete = async (row: SuggestionResponse) => {
  replyMode.value = 'reply';
  currentReplyId.value = row.id;
  replyForm.value.replyContent = '';

  // 设置当前建议数据用于显示详情
  currentSuggestion.value = row;
  replyVisible.value = true;
};

/**
 * 查看建议
 * @param row 建议数据
 */
const handleView = async (row: SuggestionResponse) => {
  try {
    // 获取建议详情
    const res = await getSuggestionDetail(row.id);
    const detail = res.data.data;

    // 设置当前建议数据用于显示详情
    currentSuggestion.value = {
      ...row,
      ...detail,
    };

    // 检查是否有回复内容
    const hasReplyContent = detail?.replyContent && detail.replyContent.trim() !== '';

    if (hasReplyContent) {
      // 有回复内容时，进入修改模式，显示现有回复内容
      replyMode.value = 'modify';
      currentReplyId.value = row.id;
      replyForm.value.replyContent = detail.replyContent;
    } else {
      // 没有回复内容时，也进入修改模式，允许添加回复内容
      replyMode.value = 'modify';
      currentReplyId.value = row.id;
      replyForm.value.replyContent = '';
    }

    replyVisible.value = true;
  } catch (e) {
    MessagePlugin.error(e.message || '获取建议详情失败');
  }
};

/**
 * 提交回复
 */
const submitReply = async () => {
  try {
    if (replyMode.value === 'processing') {
      // 处理建议：弹出确认对话框
      const dialogInstance = DialogPlugin.confirm({
        header: '确认处理',
        body: `确定要处理建议"${currentSuggestion.value?.title}"吗？`,
        onConfirm: async () => {
          try {
            // 调用后端接口，修改建议状态为处理中
            await handleSuggestion({ id: currentReplyId.value });
            MessagePlugin.success('已进入处理中！');
            replyVisible.value = false;
            fetchData(); // 刷新列表
          } catch (e) {
            MessagePlugin.error(e.message || '操作失败，请稍后重试');
          }
          dialogInstance.destroy();
        },
      });
    } else {
      const params: SuggestionStatusRequest = {
        id: currentReplyId.value,
        replyContent: replyForm.value.replyContent,
      };

      if (replyMode.value === 'reply') {
        // 完成建议
        await completeSuggestion(params);
        MessagePlugin.success('完成成功！');
      } else if (replyMode.value === 'modify') {
        // 修改回复内容
        await completeSuggestion(params);
        MessagePlugin.success('保存成功！');
      }

      replyVisible.value = false;
      fetchData();
    }
  } catch (e) {
    MessagePlugin.error(e.message || (replyMode.value === 'reply' ? '完成失败' : '保存失败'));
  }
};

/**
 * 查看详情
 * @param row 建议数据
 */
const viewDetail = (row: SuggestionResponse) => {
  try {
    // 设置当前建议数据
    currentSuggestion.value = row;
    // 显示详情弹窗
    contentVisible.value = true;
  } catch (error) {
    console.error('查看详情失败:', error);
    MessagePlugin.error(error.message || '查看详情失败，请稍后重试');
  }
};

/**
 * 关闭图片预览
 */
const closeImagePreview = () => {
  imagePreviewVisible.value = false;
  // 延迟清理图片URL，避免闪烁
  setTimeout(() => {
    currentImageUrl.value = '';
  }, 300);
};

/**
 * 预览图片
 * @param imgUrl 图片URL
 */
const previewImage = (imgUrl: string) => {
  try {
    // 验证图片URL是否有效
    if (!imgUrl || imgUrl.trim() === '') {
      MessagePlugin.warning('图片地址无效');
      return;
    }

    // 设置当前图片URL
    currentImageUrl.value = imgUrl;

    // 使用 nextTick 确保 DOM 更新后再显示弹窗
    nextTick(() => {
      imagePreviewVisible.value = true;
    });
  } catch (error) {
    console.error('预览图片失败:', error);
    MessagePlugin.error('预览图片失败，请稍后重试');
  }
};

/**
 * 图片加载失败处理
 * @param event 事件对象
 */
const handleImageError = (event: Event) => {
  const target = event.target as HTMLImageElement;
  target.src = 'https://via.placeholder.com/150'; // 替换为默认图片
  target.onerror = null; // 防止重复触发
};

/**
 * 表单重置
 */
const onReset = () => {
  formData.value = { ...searchForm };
  fetchData();
};

/**
 * 表单提交
 */
const onSubmit = () => {
  pagination.value.current = 1;
  fetchData();
};

/**
 * 分页变化处理
 */
const rehandlePageChange = (pageInfo: PageInfo) => {
  pagination.value.current = pageInfo.current;
  pagination.value.pageSize = pageInfo.pageSize;
  fetchData();
};

/**
 * 表格变化处理
 */
const rehandleChange = (changeParams: unknown, triggerAndData: unknown) => {
  console.log('表格变化:', changeParams, triggerAndData);
};

/**
 * 处理建议：将建议状态从待处理改为处理中
 * @param row 当前建议数据
 */
const handleToProcessing = async (row: SuggestionResponse) => {
  // 设置处理模式
  replyMode.value = 'processing';
  currentReplyId.value = row.id;

  // 设置当前建议数据用于显示详情
  currentSuggestion.value = row;
  replyVisible.value = true;
};

defineExpose({ handleToProcessing });
</script>

<style lang="less" scoped>
.suggestion-table {
  background-color: var(--td-bg-color-container);
  border-radius: var(--td-radius-large);
  box-shadow: var(--td-shadow-1);
  /* 中文注释：移除overflow hidden，避免影响表头定位 */
  /* overflow: hidden; */
  animation: fadeInUp 0.3s ease-out;

  // 状态筛选区域样式
  .status-section {
    padding: var(--td-comp-paddingTB-lg) var(--td-comp-paddingLR-xl);
    background: linear-gradient(135deg, var(--td-brand-color-1) 0%, var(--td-brand-color-2) 100%);
    border-bottom: 1px solid var(--td-border-level-1-color);
    position: relative;
    margin-bottom: 24px;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--td-brand-color) 0%, var(--td-brand-color-1) 100%);
    }

    .status-tabs {
      :deep(.t-tabs__nav) {
        background: transparent;
        border-bottom: none;
      }
      :deep(.t-tabs__nav-item) {
        padding: 12px 24px;
        margin-right: 8px;
        border-radius: var(--td-radius-medium);
        transition: all 0.3s ease;
        border: 2px solid transparent;

        &:hover {
          background: var(--td-brand-color-1);
          border-color: var(--td-brand-color-1);
        }

        &.t-is-active {
          background: var(--td-brand-color);
          color: white;
          border-color: var(--td-brand-color);
          box-shadow: 0 4px 12px var(--td-brand-color-2);
        }
      }

      .tab-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
      }
    }
  }

  // 搜索区域样式
  .search-section {
    padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
    background: linear-gradient(135deg, var(--td-brand-color-1) 0%, var(--td-brand-color-2) 100%);
    border-bottom: 1px solid var(--td-border-level-1-color);
  }

  // 操作区域样式
  .action-section {
    padding: var(--td-comp-paddingTB-lg) 0;
    display: flex;
    align-items: center;
    background-color: var(--td-bg-color-container);
    border-bottom: 1px solid var(--td-border-level-1-color);
    gap: 16px;

    .stats-info {
      margin-left: auto;
      display: flex;
      align-items: center;
      .t-tag {
        font-weight: 500;
        padding: 8px 16px;
        border-radius: var(--td-radius-medium);
        background: linear-gradient(135deg, var(--td-brand-color-1) 0%, var(--td-brand-color-2) 100%);
        border: 1px solid var(--td-brand-color-1);
        color: var(--td-brand-color);
      }
    }
  }

  // 表格容器样式
  .table-container {
    padding: 0 var(--td-comp-paddingLR-xl) var(--td-comp-paddingTB-xl);
    background-color: var(--td-bg-color-container);

    :deep(.t-table) {
      border-radius: var(--td-radius-medium);
      box-shadow: var(--td-shadow-1);
      border: 1px solid var(--td-border-level-1-color);

      .t-table__header {
        background: linear-gradient(
          135deg,
          var(--td-bg-color-secondarycontainer) 0%,
          var(--td-bg-color-container) 100%
        );
        border-bottom: 2px solid var(--td-border-level-1-color);

        th {
          font-weight: 600;
          color: var(--td-text-color-primary);
          padding: 14px 12px;
          text-align: center;
          vertical-align: middle;
        }
      }

      .t-table__body {
        tr {
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

          &:hover {
            background: linear-gradient(135deg, var(--td-bg-color-container-hover) 0%, var(--td-brand-color-1) 100%);
            transform: translateY(-2px);
            box-shadow: var(--td-shadow-2);
            z-index: 1;
          }

          td {
            padding: 14px 12px;
            border-bottom: 1px solid var(--td-border-level-1-color);
            text-align: center;
            vertical-align: middle;
            height: 48px;
          }

          &:last-child td {
            border-bottom: none;
          }
        }
      }
    }
  }
}

// 表单样式优化
.form-item-content {
  width: 100%;
  :deep(.t-input),
  :deep(.t-select),
  :deep(.t-date-range-picker) {
    border-radius: var(--td-radius-medium);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--td-border-level-1-color);

    &:hover {
      border-color: var(--td-brand-color-1);
      box-shadow: 0 0 0 3px var(--td-brand-color-2);
    }

    &:focus-within {
      border-color: var(--td-brand-color);
      box-shadow: 0 0 0 4px var(--td-brand-color-2);
      transform: translateY(-1px);
    }

    .t-input__suffix {
      color: var(--td-brand-color);
    }
  }

  // 日期选择器特殊样式
  :deep(.t-date-range-picker) {
    cursor: pointer;

    .t-input__control {
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }

    .t-input__suffix {
      color: var(--td-brand-color);
      font-size: 16px;
      pointer-events: none;
    }
  }
}

// 操作容器样式
.operation-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

// 表格单元格样式
.index-cell,
.title-cell,
.category-cell,
.content-cell,
.publisher-cell,
.time-cell,
.operation-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 36px;
}

.title-cell .title-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;

  .title-icon {
    color: var(--td-brand-color);
    font-size: 16px;
    flex-shrink: 0;
  }

  .title-text {
    font-weight: 500;
    color: var(--td-text-color-primary);
    line-height: 1.4;
  }
}

.category-cell {
  .t-tag {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--td-radius-small);
  }
}

.publisher-cell {
  gap: 8px;

  .publisher-avatar {
    background: linear-gradient(135deg, var(--td-brand-color) 0%, var(--td-brand-color-1) 100%);
    color: white;
    font-weight: 600;
    font-size: 12px;
  }

  .publisher-name {
    font-weight: 500;
    color: var(--td-text-color-primary);
  }
}

.time-cell {
  gap: 6px;

  .time-icon {
    color: var(--td-text-color-placeholder);
    font-size: 14px;
  }

  .time-text {
    color: var(--td-text-color-secondary);
    font-size: 13px;
  }
}

.operation-cell .t-button {
  min-width: 60px;
  height: 32px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
}

.ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

// 详情弹窗样式
.detail-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px;

  .detail-section {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }

    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--td-text-color-primary);
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--td-border-level-1-color);
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: var(--td-brand-color);
        font-size: 18px;
      }
    }

    .section-content {
      color: var(--td-text-color-secondary);
      line-height: 1.6;
      white-space: pre-wrap;
      word-break: break-word;
      padding: 12px;
      background: var(--td-bg-color-secondarycontainer);
      border-radius: var(--td-radius-medium);
      border-left: 4px solid var(--td-brand-color);
    }

    .image-list {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;

      .detail-image {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border-radius: var(--td-radius-medium);
        border: 2px solid var(--td-border-level-1-color);
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          transform: scale(1.05);
          border-color: var(--td-brand-color);
          box-shadow: 0 4px 12px var(--td-brand-color-2);
        }
      }
    }
  }
}

// 分页样式优化
:deep(.t-pagination) {
  margin-top: var(--td-comp-margin-xl);
  padding: var(--td-comp-paddingTB-lg) 0;
  border-top: 1px solid var(--td-border-level-1-color);
  background: linear-gradient(135deg, var(--td-bg-color-secondarycontainer) 0%, var(--td-bg-color-container) 100%);
  border-radius: 0 0 var(--td-radius-medium) var(--td-radius-medium);

  .t-pagination__total {
    color: var(--td-text-color-secondary);
    font-weight: 600;
  }

  .t-pagination__jumper {
    .t-input {
      border-radius: var(--td-radius-small);
      transition: all 0.2s ease;

      &:hover {
        border-color: var(--td-brand-color-1);
      }

      &:focus-within {
        border-color: var(--td-brand-color);
        box-shadow: 0 0 0 2px var(--td-brand-color-2);
      }
    }
  }

  .t-pagination__btn {
    transition: all 0.2s ease;
    border-radius: var(--td-radius-small);

    &:hover {
      transform: translateY(-1px);
      box-shadow: var(--td-shadow-1);
    }

    &.t-is-current {
      background: linear-gradient(135deg, var(--td-brand-color) 0%, var(--td-brand-color-1) 100%);
      color: white;
      box-shadow: 0 2px 8px var(--td-brand-color-2);
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .suggestion-table {
    .status-section,
    .search-section,
    .action-section {
      padding: var(--td-comp-paddingTB-lg) var(--td-comp-paddingLR-lg);
    }

    .table-container {
      padding: 0 var(--td-comp-paddingLR-lg) var(--td-comp-paddingTB-lg);
    }

    .action-section {
      flex-direction: column;
      gap: 16px;
      align-items: stretch;

      .stats-info {
        text-align: center;
      }
    }
  }
}

// 图片预览样式
.image-preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  position: relative;
  min-height: 200px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: var(--td-radius-medium);

  .preview-header {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10000;
  }

  .close-btn {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    padding: 8px;
    color: white;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      background-color: rgba(0, 0, 0, 0.9);
      border-color: rgba(255, 255, 255, 0.6);
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
  }

  .preview-image {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--td-radius-medium);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    animation: fadeInScale 0.3s ease-out;
    border: 3px solid rgba(255, 255, 255, 0.1);

    &:hover {
      transform: scale(1.02);
      box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
      border-color: rgba(255, 255, 255, 0.2);
    }
  }
}

// 图片预览动画
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

// 回复弹窗样式
.reply-dialog-content {
  display: flex;
  flex-direction: column;
  gap: 24px;

  .detail-section {
    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--td-text-color-primary);
      padding-bottom: 8px;
      border-bottom: 2px solid var(--td-border-level-1-color);
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: var(--td-brand-color);
        font-size: 18px;
      }
    }

    .detail-content {
      .detail-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 6px;
        padding: 4px 0;

        .detail-label {
          font-weight: 500;
          color: var(--td-text-color-primary);
          margin-right: 12px;
          min-width: 80px;
          flex-shrink: 0;
          line-height: 1.5;
        }

        .detail-value {
          flex: 1;
          color: var(--td-text-color-secondary);
          font-size: 14px;
          line-height: 1.6;
          word-break: break-all;
          padding: 2px 0;

          &.overview-content {
            background: var(--td-bg-color-secondarycontainer);
            border-radius: var(--td-radius-medium);
            padding: 12px;
            border-left: 4px solid var(--td-brand-color);
            margin-top: 4px;
          }
        }

        .detail-images {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-top: 4px;

          .detail-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: var(--td-radius-small);
            border: 1px solid var(--td-border-level-1-color);
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
              transform: scale(1.05);
              border-color: var(--td-brand-color);
              box-shadow: 0 4px 12px var(--td-brand-color-2);
            }
          }
        }
      }
    }
  }

  .reply-section {
    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--td-text-color-primary);
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--td-border-level-1-color);
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: var(--td-brand-color);
        font-size: 18px;
      }
    }

    .t-form {
      :deep(.t-form__item) {
        margin-bottom: 16px;
      }

      :deep(.t-form__label) {
        font-weight: 500;
        color: var(--td-text-color-primary);
      }

      :deep(.t-form__input),
      :deep(.t-form__select),
      :deep(.t-form__textarea) {
        border-radius: var(--td-radius-medium);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 2px solid var(--td-border-level-1-color);

        &:hover {
          border-color: var(--td-brand-color-1);
          box-shadow: 0 0 0 3px var(--td-brand-color-2);
        }

        &:focus-within {
          border-color: var(--td-brand-color);
          box-shadow: 0 0 0 4px var(--td-brand-color-2);
          transform: translateY(-1px);
        }
      }

      :deep(.t-form__textarea) {
        .t-textarea__inner {
          min-height: 100px;
        }
      }
    }
  }
}

// 动画效果
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 深色模式适配
:root[theme-mode='dark'] {
  .suggestion-table {
    box-shadow: var(--td-shadow-2);

    .status-section {
      background: linear-gradient(135deg, var(--td-brand-color-2) 0%, var(--td-brand-color-3) 100%);

      &::before {
        background: linear-gradient(90deg, var(--td-brand-color-1) 0%, var(--td-brand-color-2) 100%);
      }

      .status-tabs {
        :deep(.t-tabs__nav-item) {
          &:hover {
            background: var(--td-brand-color-2);
            border-color: var(--td-brand-color-2);
          }

          &.t-is-active {
            background: var(--td-brand-color-1);
            box-shadow: 0 4px 12px var(--td-brand-color-3);
          }
        }
      }
    }

    .search-section {
      background: linear-gradient(135deg, var(--td-brand-color-2) 0%, var(--td-brand-color-3) 100%);
    }

    .action-section {
      .stats-info .t-tag {
        background: linear-gradient(135deg, var(--td-brand-color-2) 0%, var(--td-brand-color-3) 100%);
        border: 1px solid var(--td-brand-color-2);
        color: var(--td-brand-color-1);
      }
    }

    .table-container {
      :deep(.t-table) {
        box-shadow: var(--td-shadow-2);

        .t-table__header {
          background: linear-gradient(135deg, var(--td-brand-color-3) 0%, var(--td-brand-color-4) 100%);
        }

        .t-table__body tr:hover {
          background: linear-gradient(135deg, var(--td-bg-color-container-hover) 0%, var(--td-brand-color-2) 100%);
          box-shadow: var(--td-shadow-3);
        }
      }
    }
  }

  :deep(.t-pagination) {
    background: linear-gradient(135deg, var(--td-brand-color-3) 0%, var(--td-brand-color-4) 100%);

    .t-pagination__btn.t-is-current {
      background: linear-gradient(135deg, var(--td-brand-color-1) 0%, var(--td-brand-color-2) 100%);
      box-shadow: 0 2px 8px var(--td-brand-color-3);
    }
  }
}
</style>
